<template>
  <div class="panel-container">
    <div class="panel-content">
      <div class="panel-title">{{ title }}</div>
      <div class="panel-line flex-end">
        <el-radio-group v-model="tabActive" @change="handleChange" style="margin-right: 30px" size="mini">
          <el-radio-button v-for="item in tabList" :key="item.id" :label="item.id">{{ item.label }}</el-radio-button>
        </el-radio-group>
      </div>
      <MixChart :chartData="chartData" :xAxis="xAxis" />
    </div>
  </div>
</template>

<script>
import MixChart from '@/components/ECharts/MixChart.vue'
import { apiNoShareTop10 } from '@/api/assetsAlone'

export default {
  name: 'Panel1',
  props: {
    title: String,
    time: Object,
  },
  components: { MixChart },
  watch: {
    time: function () {
      this.getData()
    },
  },
  data() {
    return {
      tabActive: 1,
      tabList: [
        { id: 1, label: '日' },
        { id: 2, label: '周' },
        { id: 3, label: '月' },
      ],
      legend: [
        { name: 'AI外呼', value: 'AiCall', type: 'bar' },
        { name: '员工挖掘', value: 'user_found', type: 'bar' },
        { name: '社群', value: 'group', type: 'bar' },
        { name: '新媒体', value: 'media', type: 'bar' },
        { name: '其他', value: 'other', type: 'bar' },
        { name: '合计发布', value: 'total', type: 'line' },
      ],
      xAxis: [],
      chartData: [],
    }
  },
  mounted() {},
  destroyed() {},
  methods: {
    getData() {
      apiNoShareTop10({ ...this.time, method: this.tabActive }).then((res) => {
        const { bar_line } = res
        this.setChartsData(bar_line)
      })
    },
    handleChange() {
      this.getData()
    },
    setChartsData(data) {
      this.xAxis = data.x
      this.chartData = []
      this.legend.forEach((item) => {
        this.chartData.push({
          name: item.name,
          data: data[item.value],
          type: item.type,
        })
      })
    },
  },
}
</script>

<style scoped lang="scss">
.panel-line {
  align-items: flex-start;
}

.panel-content {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
